<template>
  <el-container>
    <el-header class="banner-box">
      <div class="banner-3">
        <div class="banner-3-box">
          <div class="banner-3-left">
            <img src="./img/0ac709b6590e4b97983d19010756ac08.jpg" alt="" />
          </div>
          <div class="banner-3-right">
            <div class="title" title="中软国际教育（大连）">中软国际教育（大连）</div>
            <div
              class="message"
              title="中软国际教育科技集团（简称中软国际教育）作为中软国际人才生态的重要组成部分，面向高校、企业、政府提供丰富的人才培养及人才综合服务，助力人才生态圈的建立。业务板块包括：校企合作、IT人才线下培训业务、在线教育业务、大赛竞赛业务、政企服务业务以及教育赋能业务。"
              >中软国际教育科技集团（简称中软国际教育）作为中软国际人才生态的重要组成部分，面向高校、企业、政府提供丰富的人才培养及人才综合服务，助力人才生态圈的建立。业务板块包括：校企合作、IT人才线下培训业务、在线教育业务、大赛竞赛业务、政企服务业务以及教育赋能业务。</div
            >
          </div>
        </div>
      </div>
    </el-header>
    <el-main>
      <MoudeleBox :list="latestPolicyNewList" :type="type[0]" />
      <MoudeleBox :list="latestNoticeInfoList" :type="type[1]" />
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { PolicyNewApi } from '@/api/dbit/policynew'
import { NoticeInfoApi } from '@/api/dbit/noticeinfo'
import { format } from 'date-fns'
import MoudeleBox from './moudeleBox.vue'

const latestPolicyNewList = ref([]) // 最新的政策新闻
const latestNoticeInfoList = ref([]) // 最新的机构公告

const type = reactive([
  {title: '政策新闻', type: 1},
  {title: '机构公告', type: 2}
])

/*获取最新的政策新闻*/
const getLatestPolicyNew = async () => {
  const res = await PolicyNewApi.getLatestPolicyNew(6)
  res.forEach((element) => {
    element.month = format(new Date(element.createTime), 'MM-dd')
    element.year = format(new Date(element.createTime), 'yyyy')
  })
  latestPolicyNewList.value = res
}

/*获取最新的机构公告*/
const getLatestNoticeInfo = async () => {
  const res = await NoticeInfoApi.getLatestNoticeInfo(6)
  res.forEach((element) => {
    element.month = format(new Date(element.createTime), 'MM-dd')
    element.year = format(new Date(element.createTime), 'yyyy')
  })
  latestNoticeInfoList.value = res
}


onMounted(() => {
  getLatestPolicyNew()
  getLatestNoticeInfo()
})
</script>
<style scoped>
ol,
ul {
  list-style: none;
}
* {
  padding: 0px;
  margin: 0px;
}
.banner-box {
  height: 280px;
  background-image: url(./img/background_img.faf7a15.png);
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  width: 100%;
}
.banner-3 {
  height: 160px;
  padding: 60px 40px;
  display: flex;
  justify-content: center;
}
.banner-3-box {
  display: flex;
  justify-content: center;
  height: 162px;
  width: 1200px;
}
.banner-3-left {
  width: 300px;
  height: 160px;
}
.banner-3-left img {
  cursor: pointer;
  height: 160px;
  object-fit: cover;
  width: 300px;
}
.banner-3-right {
  margin-left: 30px;
}

.banner-3-right .title {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  line-height: 42px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.banner-3-right .message {
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>
